<template>
    <view class="content">
        <!-- 轮播 -->
        <view class="top-box">
            <view class="top-nav">
                <view class="top-item" :class="{activeSwiper : navType == 1}" @click="chooseSwiper(1)">图片</view>
                <view class="top-item" :class="{activeSwiper : navType == 2}" @click="chooseSwiper(2)" v-if="data && data.imgs && data.imgs.length > 0">样板间</view>
                <view class="top-item" :class="{activeSwiper : navType == 3}" @click="chooseSwiper(3)" v-if="data && data.video">视频</view>
            </view>
            <view v-if="navType == 1">
                <u-swiper :list="data.images" height="557" interval="3000" duration="500" border-radius="0" indicator-pos="bottomRight" mode="number" @click="doPreview($event, data.images)"></u-swiper>
            </view>
            <view v-if="navType == 2">
                <u-swiper :list="data.imgs" height="557" interval="3000" duration="500" border-radius="0" indicator-pos="bottomRight" mode="number" @click="doPreview($event, data.imgs)"></u-swiper>
            </view>
            <view v-if="navType == 3">
                <view class="v-swiper" @click="openVideoMask">
                    <u-icon name="play-circle-fill" color="#3199f5" size="150" ></u-icon>
                </view>
            </view>
        </view>
        
        <view class="wrapper">
            <view class="top">
                <view class="t-name">{{data.name}}</view>
                <view class="area">
                    <text class="area-num">{{data.house_area}}</text>㎡
                </view>
            </view>
            
            <view class="list">
                <view class="list-l">售价</view>
                <view class="list-r">{{data.price}}/㎡</view>
            </view>
            <view class="list">
                <view class="list-l">朝向</view>
                <view class="list-r">{{data.toward}}</view>
            </view>
            <view class="list">
                <view class="list-l">装修</view>
                <view class="list-r">{{data.renovation}}</view>
            </view>
            <view class="list">
                <view class="list-l">户型</view>
                <view class="list-r">{{data.type}}</view>
            </view>
            <view class="list">
                <view class="list-l">户型分部</view>
                <view class="list-r">{{data.distribution}}</view>
            </view>
            <view class="list">
                <view class="list-l">楼层类型</view>
                <view class="list-r">{{data.floor}}</view>
            </view>
        </view>
        
        <!-- 视频弹窗 -->
        <u-mask :show="videoShow" mode="center" border-radius="14" @click="closeVideoShow">
            <view class="popup">
                <view class="win-box2">
                    <view style="width: 300px;height: 225px;">
                        <video id="myVideo" v-if="vShow" :src="data.video" :autoplay="autoplay" controls
                            play-btn-position="center" style="width: 300px;height: 225px;"></video>
                    </view>
                    <view class="pop-btn">
                        <view @click.stop="downloadVideo">
                            <u-icon name="download" color="#fff" size="80"></u-icon>
                        </view>
                        <image src="/static/icon/wx.png" class="pop-del" @click.stop="closeVideoShow"></image>
                    </view>
                </view>
            </view>
        </u-mask>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                // statusBar: 0,
                // background: { backgroundColor: 'rgba(255,255,255,0)' },
                content: '',
                id: '',
                data: {},
                
                navType: 1,//1图片 2样板间 3视频
                videoplay: '',
                autoplay: false,
                videoShow:false,
                vShow: false,
                ruleShow: false,
            };
        },
        onLoad(option) {
            let _this = this;
            //状态栏高度
            // uni.getSystemInfo({
            // 	success: function(res) {
            // 		_this.statusBar = res.statusBarHeight;
            // 	}
            // });
            this.id = option.id
            this.getData()
        },
        onReady() {
        	this.videoplay = uni.createVideoContext('myVideo')
            this.videoplay.play()
        },
        methods: {
            // 下载视频
            downloadVideo() {
                uni.showLoading({title:'下载中...'})
                uni.downloadFile({
                    url: this.video,
                	success: (res) => {
                        console.log(res)
                		if (res.statusCode === 200) {
                            var tempFilePaths = res.tempFilePath;
                            uni.saveImageToPhotosAlbum({
                                filePath: tempFilePaths,
                                success: () => {
                                    uni.hideLoading({})
                                    this.$toast('下载成功');
                                }
                            });
                		}
                	}
                });
            },
            // 关闭视频
            closeVideoShow() {
                console.log(77777)
                this.autoplay = false
                this.vShow = false
                this.videoShow = false
                this.videoplay = uni.createVideoContext('myVideo')
                this.videoplay.stop()
            },
            // 打开视频
            openVideoMask() {
                console.log(66666)
                this.videoShow = true
                this.vShow = true
                this.autoplay = true
            },
            //切换到图片时，视频停止播放
            changeVideo(e) {
                this.videoplay = uni.createVideoContext('myVideo')
            	this.videoplay.stop()
            },
            
            // 选择轮播图类型
            chooseSwiper(num) {
                if (this.navType == num) return
                this.navType = num
                
            },
            // 预览、下载 轮播图片
            doPreview(e, urls) {
                console.log(e, urls)
            	var arr = [];
                urls.forEach(cur => {
                    arr.push(cur.image)
                })
            	uni.previewImage({
            	    urls: arr,
                    current: e,
            	    longPressActions: {
                        itemList: ['保存图片'],
            	        success: (data) => {
                            console.log('data',data)
                            //data.tapIndex按钮下标 ，data.index图片下标
                            uni.downloadFile({
                                url: arr[data.index],
                            	success: (res) => {
                            		if (res.statusCode === 200) {
                                        var tempFilePaths = res.tempFilePath;
                                        uni.saveImageToPhotosAlbum({
                                            filePath: tempFilePaths,
                                            success: () => {
                                                this.$toast('下载成功');
                                            }
                                        });
                            		}
                            	}
                            });
            	        },
            	        fail: (err) => {
                            console.log(err)
            	        }
            	    }
            	});
            },
            
            getData() {
                this.$ajax('house_type_detail', {
                    user_token: this.$getSync('userToken'),
                    id: this.id,//楼盘id
                }).then(ret => {
                    if (ret.success == 1000) {
                        this.data = ret.detail
                    } else {
                        this.$toast(ret.msg);
                    }
                });
            },
            
            // onPageScroll: function(e) {
            // 	//nvue暂不支持滚动监听，可用bindingx代替
            // 	// console.log("滚动距离为：" + e.scrollTop);
            // 	let a = e.scrollTop * 0.05;
            // 	if (a > 1) {
            // 		a = 1;
            // 	}
            // 	if (e.scrollTop == 0) {
            // 		this.background.backgroundColor = 'rgba(49,153,245,0)';
            // 	} else {
            // 		this.background.backgroundColor = 'rgba(49,153,245,' + a + ')';
            // 	}
            // },
        }
    };
</script>

<style lang="scss">
    .top-box{
        position: relative;
    }
    .top-nav{
        position: absolute;
        bottom: 20rpx;
        left: 50%;
        transform: translateX(-50%);
        z-index: 9999;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: rgba(255, 255, 255, .7);
        padding: 10rpx 15rpx;
        border-radius: 7rpx;
    }
    .top-item{
        font-size: 24rpx;
        color: #000;
        padding: 10rpx 23rpx;
    }
    .activeSwiper{
        color: #fff;
        background-color: rgba(49,153,245, .7);
        border-radius: 7rpx;
    }
    .v-swiper{
        width: 750rpx;
        height: 557rpx;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .popup {
        width: 100vw;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    .win-box2 {
        width: 750upx;
        height: 557rpx;
        border-radius: 20upx;
        position: relative;
        border-radius: 10rpx;
        padding: 0 75rpx;
    }
    .pop-btn{
        position: absolute;
        bottom: -100upx;
        left: 33vw;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .pop-del {
        width: 10vw;
        height: 10vw;
        margin-left: 115rpx;
    }
    
    .list{
        padding-top: 20rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .list-l{
        color: #747272;
        padding-right: 20rpx;
        width: 20vw;
    }
    .list-r{
        flex: 1;
    }
    
    page{
        background-color: #f5f5f5;
    }
    .wrapper{
        background-color: #fff;
        padding: 40rpx 30rpx;
        font-size: 28rpx;
    }
    .top{
        padding-bottom: 20rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .t-name{
        font-size: 40rpx;
        flex: 1;
    }
    .area{
        padding-left: 15rpx;
        font-size: 26rpx;
    }
    .area-num{
        font-size: 46rpx;
        font-weight: bold;
        line-height: 1;
        padding-right: 5rpx;
        color: #ef4034;
    }
    
</style>
